import { View, Text, Button,StyleSheet, TouchableOpacity,Image } from 'react-native'
import React,{useEffect, useState} from 'react'

const ss=StyleSheet.create({
  f1:{
    flexDirection:'row',
    flexWrap:'wrap'
  },
  item:{
    width:'50%',
    borderBottomWidth:1,
    borderBottomColor:'#aaa',
    alignItems:'center',
    paddingVertical:12
  },
  title:{
    fontSize:16
  },
  num:{
    fontSize:18,
    fontWeight:'bold'
  },
  compare:{
    fontSize:14,
    opacity:0.8
  },
  f2:{
    flexDirection:'row',
    flexWrap:'wrap',
    paddingVertical:16
  },
  menu:{
    width:'50%',
    alignItems:'center',
    paddingVertical:12
  }
})

export default function MainMenu({navigation}) {
  // 状态数据 --- 运营统计数据
  let [statistics,setStatistics]=useState([])
  // 状态数据 --- 功能管理菜单
  let [menu,setMenu]=useState([])
  // 组件挂载时,异步请求服务器接口数据,获取状态数据
  useEffect(()=>{
    // todo 数据
    setStatistics([
      {title:'上架商品总数',num:'12,3456',compare:"截至本月",color:'#0aa1ed'},
      {title:'PC端注册用户',num:'12,3456',compare:"较上月增长",color:'#0aeda1'},
      {title:'APP端注册用户',num:'12,3456',compare:"较上月增长",color:'#0aeda1'},
      {title:'PC端PV量',num:'12,3456',compare:"本周数据",color:'#ed0aa1'},
      {title:'APP端PV量',num:'12,3456',compare:"本周数据",color:'#0aeda1'},
      {title:'APP总下载量',num:'12,3456',compare:"截至本月",color:'#ed0a1a'},
    ]),
    setMenu([
      {pic:require('../assets/img/menu_product.jpg'),title:'商品管理',target:'plist'},
      {pic:require('../assets/img/menu_user.jpg'),title:'用户管理',target:'ulist'},
      {pic:require('../assets/img/menu_order.jpg'),title:'订单管理',target:'olist'},
      {pic:require('../assets/img/menu_refresh.jpg'),title:'首页管理',target:'idxManagement'},
    ])
  },[])
  return (
    <View>
      {/* F1 运营统计信息 */}
      <View style={ss.f1}>
        {
          statistics.map((item,i)=>(
            <View key={i} style={[ss.item,
            {borderRightColor:'#aaa',borderRightWidth:i%2===0?1:0}]}>
            <Text style={ss.title}>{item.title}</Text>
            <Text style={[ss.num,{color:item.color}]}>{item.num}</Text>
            <Text style={ss.compare}>{item.compare}</Text>
          </View>
          ))
        } 
      </View>
      {/* F2 功能管理菜单 */}
      <View style={ss.f2}>
         {
          menu.map((item,i)=>(
          <TouchableOpacity style={ss.menu}
           activeOpacity={0/.6} key={i} onPress={()=>{
            navigation.navigate(item.target)
           }}>
            <Image source={item.pic}/>
            <Text>{item.title}</Text>
          </TouchableOpacity>
          ))
         }
      </View>
     
      <Text onPress={()=>{navigation.goBack()}}>退出登录</Text>
    </View>
  )
}